<template>
  <el-scrollbar height="600px" class="account-scrollbar">
    <el-radio-group v-if="!!tableData.length" v-model="selectdUserId" class="account-radio-group" @change="radioChange">
      <el-radio :label="item.userId" :disabled="!(item.onLine && item.authorized)" size="large" border class="account-radio" v-for="(item, index) in tableData" :key="index">
        <div class="radio-layout">
          <div class="avatar">
            <img v-if="!!item.avatar" :src="item.avatar" alt="">
          </div>
          <div class="msg">
            <div class="msg-title">
              <div class="name">{{item.name}}</div>
              <div v-if="!item.authorized">未授权</div>
              <el-dropdown v-else trigger="contextmenu">
                <div class="status" :class="{
                  onLine: item.onLine && item.authorized,
                  offLine: !item.onLine
                }">
                    {{ item.onLine ? '在线' : '离线'}}
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="2" :disabled="!item.onLine" :icon="CloseBold" @click="handleLogout(item)" >离线
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="msg-corp">{{item.companyFullName}}</div>
          </div>
        </div>
      </el-radio>
    </el-radio-group>
    <div class="default" v-else>
      <el-empty description="暂无数据" />
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">
  import { reactive, ref, onMounted, computed, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getAccountList, doLogout } from '@renderer/ajax/api/login'
  import { useRouter } from 'vue-router'
  import { useStore } from '../../../store/index'
  import { Select, CloseBold } from '@element-plus/icons-vue'

  const router = useRouter()
  const store = useStore()

  let tableData = reactive<Array<any>>([])
  let selectdUserId = ref<string>('')

  interface Props {
    modelValue: string
  }
  const props = withDefaults(defineProps<Props>(), {
    modelValue: ''
  })
  const emit = defineEmits(['update:modelValue', 'submit', 'doLogin'])

  const init = async () => {
    selectdUserId.value = store.state.common.userId
    const res = await getAccountList({})
    console.log('res - -  ', res)
    if(!!res.length){
      tableData.splice(0)
      tableData.push(...res)
    }
    if(selectdUserId.value) {
      let info = tableData.find(el => el.userId == selectdUserId.value)
      emit('submit', info)
    }
  }

  const radioChange = (val) => {
    let info = tableData.find(el => el.userId == val)
    emit('update:modelValue', val)
    emit('submit', info)
  }

  watch(()=>props.modelValue, (val)=>{
    console.log('val - - modelValue - - -    ', val)
    if(!val){
      selectdUserId.value = ''
    }
  })

  const handleLogout = async (data) => {
    if(!data.onLine) {
      return
    }
    await doLogout({userId: data.userId})
    ElMessage.success('已成功离线')
    data.onLine = false
  }


  const handleLogin = () => {
    emit('doLogin')
  }

  onMounted(async ()=>{
    await init()
  })

  defineExpose({
    init
  })

</script>

<style lang="scss" scoped>
  .account-scrollbar{
    width: 900px;
    height: 520px;
    padding: 20px 0;
    .account-radio-group{
      
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 20px;
      row-gap: 20px;
      padding-bottom: 60px;
      .account-radio{
        height: 80px;
        display: flex;
        align-items: center;
        margin-right: 0;
        
        .radio-layout{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .avatar{
            width: 60px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;

            margin-right: 12px;
            background-color: #e6e6e6;
            img{
              width: 100%;
              height: 100%;
              
            }
          }
          .msg{
            width: 160px;
            // background-color: pink;
            .msg-title{
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 12px;

              .name{
                flex: 1;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                // background-color: pink;
              }
              .status{
                display: flex;
                align-items: center;
                font-size: 12px;
              }
              .onLine::before{
                content: '';
                display: inline-block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: #73FA79;
                margin-right: 4px;
              }
              .offLine::before{
                content: '';
                display: inline-block;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background-color: #FF7E79;
                margin-right: 4px;
              }
            }
            .msg-corp{
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              font-size: 12px;

            }
  
          }
        }

      }
      .account-item{
        border: 1px solid #111;
        display: flex;
        align-items: center;
      }
      .account-list{
      }

    }
    .default{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }


</style>
